.b_ContactInfo{
    padding-block:0;
}
.b_ContactInfo .wrapper{
    padding-block: 105px 64px;
    background-color:var(--color_foundation_blue);
    color:var(--color_manilla);
}
.b_ContactInfo .round_corners{
    border-radius: 50px;
}
/*Large*/
@media (width >= 1000px) {
    .b_ContactInfo .wrapper{
        padding-block: 90px 70px;
    }
    .b_ContactInfo .round_corners{
        border-radius: 70px;
    }
}



/*INTRO*/
.b_ContactInfo .intro .h5{
    margin-bottom: 12px;
}
.b_ContactInfo .intro h2{
    color: var(--color_honey_glow);
    margin-bottom:24px;
}
/*Large*/
@media (width >= 1000px) {
    .b_ContactInfo .intro .h5{
        margin-bottom: 44px;
    }
}



/*CONTACT DETAILS*/
.b_ContactInfo .contact_info{
    display: grid;
    gap: 40px;
}
.b_ContactInfo .contact_info .body_text_large{
    color: var(--color_honey_glow);
}

.b_ContactInfo .contact_info svg{
    margin-bottom: 16px;
}
@media (width >= 1000px) {
    .b_ContactInfo .contact_info{
        gap: 56px;
    }
    .b_ContactInfo .contact_info svg{
        margin-bottom: 12px;
    }
}

.b_ContactInfo .contact_info a{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.b_ContactInfo .contact_info a svg{
    margin-bottom: 0;
}




/*IMAGE*/
.b_ContactInfo .image img{
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}





/*GRID*/
.b_ContactInfo .grid{
    display: grid;
    gap: 50px;
    grid-template-columns: 1fr;
    grid-template:
        "intro"
        "contact_info"
        "cta";
}
.b_ContactInfo .grid.with_image{
    grid-template:
        "intro"
        "contact_info"
        "image"
        "cta";
}
/*Large*/
@media (width >= 1000px) {
    .b_ContactInfo .grid{
        gap: 30px 80px;
        grid-template:
            "intro contact_info"
            "cta contact_info" auto / auto 400px;
    }
    .b_ContactInfo .grid svg{
        position: absolute;
        transform: translate(-40px, 5px);
    }
    .b_ContactInfo .grid.with_image{
        grid-template:
            "intro intro"
            "contact_info image"
            "cta cta" auto / 400px auto;
    }
    .b_ContactInfo .grid.with_image svg{
        position: static;
        transform: unset;
    }
}
.b_ContactInfo .intro{
    grid-area: intro;
}
.b_ContactInfo .contact_info{
    grid-area: contact_info;
}
.b_ContactInfo .image{
    grid-area: image;
}
.b_ContactInfo .cta{
    grid-area: cta;
}